<template>
  <div class="data-card" :class="{ 'card-hover': isHovered }" @mouseenter="isHovered = true" @mouseleave="isHovered = false">
    <div class="card-header">
      <div class="header-icon" :style="{ color: iconColor }">
        <slot name="icon">{{ icon }}</slot>
      </div>
      <div class="header-title">{{ title }}</div>
      <div class="refresh-btn" v-if="showRefresh" @click="handleRefresh">⟳</div>
    </div>
    
    <div class="card-content">
      <div class="main-value" :style="{ color: valueColor }">
        {{ formattedValue }}
        <span class="value-unit" v-if="unit">{{ unit }}</span>
      </div>
      
      <div class="sub-info" v-if="subInfo">
        <div class="sub-title">{{ subInfo.title }}</div>
        <div class="sub-value" :style="{ color: subInfo.color || '#8892a0' }">
          {{ subInfo.value }}
        </div>
      </div>
      
      <div class="trend-indicator" v-if="trend">
        <div class="trend-icon" :class="trend.type">
          {{ trend.type === 'up' ? '↗' : trend.type === 'down' ? '↘' : '→' }}
        </div>
        <div class="trend-text" :style="{ color: trend.color }">
          {{ trend.text }}
        </div>
      </div>
    </div>
    
    <div class="card-footer" v-if="footer">
      <div class="footer-text">{{ footer }}</div>
    </div>
    
    <!-- 发光边框效果 -->
    <div class="glow-border"></div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'

interface Props {
  title: string
  value: number | string
  unit?: string
  icon?: string
  iconColor?: string
  valueColor?: string
  subInfo?: {
    title: string
    value: string | number
    color?: string
  }
  trend?: {
    type: 'up' | 'down' | 'stable'
    text: string
    color: string
  }
  footer?: string
  showRefresh?: boolean
  precision?: number
}

const props = withDefaults(defineProps<Props>(), {
  icon: '📊',
  iconColor: '#64ffda',
  valueColor: '#06b6d4',
  showRefresh: false,
  precision: 0
})

const emit = defineEmits<{
  refresh: []
}>()

const isHovered = ref(false)

const formattedValue = computed(() => {
  if (typeof props.value === 'string') return props.value
  
  if (props.value >= 1000000) {
    return (props.value / 1000000).toFixed(props.precision) + 'M'
  } else if (props.value >= 1000) {
    return (props.value / 1000).toFixed(props.precision) + 'K'
  } else {
    return props.value.toFixed(props.precision)
  }
})

const handleRefresh = () => {
  emit('refresh')
}
</script>

<style scoped>
.data-card {
  position: relative;
  background: rgba(17, 34, 64, 0.4);
  border: 1px solid rgba(100, 255, 218, 0.3);
  border-radius: 0.5vw;
  padding: 1vw;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  overflow: hidden;
  height: 100%;
  min-height: 80px; /* 最小高度保证 */
  max-height: 120px; /* 最大高度限制 */
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  flex: 1; /* 确保能够填充可用空间 */
}

.data-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, 
    rgba(100, 255, 218, 0.05) 0%, 
    rgba(157, 78, 221, 0.05) 50%, 
    rgba(244, 114, 182, 0.05) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.card-hover::before {
  opacity: 1;
}

.data-card:hover {
  transform: scale(1.03);
  border-color: rgba(157, 78, 221, 0.5);
  box-shadow: 0 0 15px rgba(100, 255, 218, 0.3);
}

.card-header {
  display: flex;
  align-items: center;
  margin-bottom: 0.8vw;
  position: relative;
  z-index: 2;
  flex-shrink: 0; /* 防止头部被压缩 */
  min-height: 20px; /* 最小高度保证 */
}

.header-icon {
  font-size: 16px; /* 固定字体大小，不受缩放影响 */
  margin-right: 8px;
  filter: drop-shadow(0 0 4px currentColor);
  transition: all 0.3s ease;
}

.header-title {
  flex: 1;
  font-size: 14px; /* 固定字体大小，不受缩放影响 */
  color: #e6e6e6;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.refresh-btn {
  width: 1.2vw;
  height: 1.2vw;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(100, 255, 218, 0.1);
  border: 1px solid rgba(100, 255, 218, 0.3);
  border-radius: 50%;
  color: #64ffda;
  cursor: pointer;
  font-size: 0.7vw;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.refresh-btn:hover {
  background: rgba(100, 255, 218, 0.2);
  transform: rotate(180deg);
  box-shadow: 0 0 6px rgba(100, 255, 218, 0.5);
}

.card-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 2;
  min-height: 40px; /* 最小高度保证 */
  overflow: hidden; /* 防止内容溢出 */
}

.main-value {
  font-size: 36px; /* 固定字体大小，不受缩放影响 */
  font-weight: bold;
  color: #06b6d4;
  line-height: 1.2;
  margin-bottom: 8px;
  text-shadow: 0 0 10px rgba(6, 182, 212, 0.5);
  transition: all 0.3s ease;
  flex-shrink: 0; /* 防止数值被压缩 */
  white-space: nowrap; /* 防止换行 */
  overflow: hidden; /* 防止溢出 */
  text-overflow: ellipsis; /* 超出显示省略号 */
}

.value-unit {
  font-size: 16px; /* 固定字体大小，不受缩放影响 */
  color: #8892a0;
  margin-left: 4px;
}

.sub-info {
  margin-bottom: 8px;
}

.sub-title {
  font-size: 12px; /* 固定字体大小，不受缩放影响 */
  color: #8892a0;
  margin-bottom: 4px;
}

.sub-value {
  font-size: 16px; /* 固定字体大小，不受缩放影响 */
  font-weight: 500;
}

.trend-indicator {
  display: flex;
  align-items: center;
  margin-top: 8px;
}

.trend-icon {
  font-size: 14px; /* 固定字体大小，不受缩放影响 */
  margin-right: 6px;
  transition: all 0.3s ease;
}

.trend-icon.up {
  color: #10b981;
  animation: pulse-up 2s ease-in-out infinite;
}

.trend-icon.down {
  color: #ef4444;
  animation: pulse-down 2s ease-in-out infinite;
}

.trend-icon.stable {
  color: #8892a0;
}

.trend-text {
  font-size: 14px; /* 固定字体大小，不受缩放影响 */
  font-weight: 500;
}

.card-footer {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(100, 255, 218, 0.1);
  position: relative;
  z-index: 2;
}

.footer-text {
  font-size: 12px; /* 固定字体大小，不受缩放影响 */
  color: #8892a0;
  text-align: center;
}

.glow-border {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 0.5vw;
  background: linear-gradient(45deg, 
    transparent 30%, 
    rgba(100, 255, 218, 0.1) 50%, 
    transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.card-hover .glow-border {
  opacity: 1;
  animation: border-glow 2s ease-in-out infinite;
}

@keyframes pulse-up {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

@keyframes pulse-down {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

@keyframes border-glow {
  0% { background-position: -100% 0; }
  100% { background-position: 100% 0; }
}

/* 固定字体大小，不受缩放影响 */

/* 特殊效果变体 */
.data-card.metric-card {
  background: linear-gradient(135deg, 
    rgba(6, 182, 212, 0.1) 0%, 
    rgba(17, 34, 64, 0.4) 100%);
}

.data-card.warning-card {
  border-color: rgba(244, 114, 182, 0.3);
}

.data-card.warning-card:hover {
  border-color: rgba(244, 114, 182, 0.5);
  box-shadow: 0 0 15px rgba(244, 114, 182, 0.3);
}

.data-card.success-card {
  border-color: rgba(16, 185, 129, 0.3);
}

.data-card.success-card:hover {
  border-color: rgba(16, 185, 129, 0.5);
  box-shadow: 0 0 15px rgba(16, 185, 129, 0.3);
}
</style>
